<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>库存查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-form-item {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <!-- 搜索表单 -->
        <div style="margin: 30px 10px 20px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" style="display: flex; align-items: center; flex-wrap: wrap;">
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">物料编号</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <input type="text" name="materialCode" class="layui-input" placeholder="请输入物料编号" style="border-radius:4px;">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">物料名称</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <input type="text" name="materialName" class="layui-input" placeholder="请输入物料名称" style="border-radius:4px;">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">供应商名</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <input type="text" name="supplierName" class="layui-input" placeholder="请输入供应商名" style="border-radius:4px;">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">仓库</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <select name="warehouseId" lay-search lay-filter="warehouseSelect">
                                <option value="">全部仓库</option>
                                <!-- 仓库选项将通过JS动态加载 -->
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">库位</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <select name="storageLocationId" lay-search>
                                <option value="">全部库位</option>
                                <!-- 库位选项将通过JS动态加载 -->
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center;">
                        <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="data-search-btn" style="border-radius:4px; margin-right:5px;">
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-normal layui-btn-sm" style="border-radius:4px;">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格容器 -->
        <div style="margin: 0 10px">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>

        <!-- 操作按钮模板 -->
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-detail" lay-event="detail">查看详情</a>
        </script>

        <!-- 详情弹窗 -->
        <div id="detail" style="display: none; padding: 20px;">
            <div class="layui-form layuimini-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">物料编号</label>
                    <div class="layui-input-block">
                        <span id="detail-materialCode"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">物料名称</label>
                    <div class="layui-input-block">
                        <span id="detail-materialName"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-block">
                        <span id="detail-supplierName"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">仓库</label>
                    <div class="layui-input-block">
                        <span id="detail-warehouseName"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库位</label>
                    <div class="layui-input-block">
                        <span id="detail-storageLocationName"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存数量</label>
                    <div class="layui-input-block">
                        <span id="detail-inventoryQuantity"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <span id="detail-inventoryUnit"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">总重量</label>
                    <div class="layui-input-block">
                        <span id="detail-inventoryTotalWeight"></span> kg
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">批次号</label>
                    <div class="layui-input-block">
                        <span id="detail-inventoryBatchNumber"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生产日期</label>
                    <div class="layui-input-block">
                        <span id="detail-inventoryProductionDate"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">过期日期</label>
                    <div class="layui-input-block">
                        <span id="detail-inventoryExpiryDate"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;

        var index;

        // 初始化仓库下拉框 - 加载所有仓库
        function loadWarehouses() {
            $.get('/inventory/listAllWarehouses', function(res) {
                if(res.code === 0) {
                    var html = '<option value="">全部仓库</option>';
                    $.each(res.data, function(i, item) {
                        html += '<option value="' + item.warehouseId + '">' + item.warehouseName + '</option>';
                    });
                    $('select[name="warehouseId"]').html(html);
                    form.render('select');
                }
            });
        }

        // 初始化库位下拉框 - 加载所有库位
        function loadStorageLocations() {
            $.get('/inventory/listAllStorageLocations', function(res) {
                if(res.code === 0) {
                    var html = '<option value="">全部库位</option>';
                    $.each(res.data, function(i, item) {
                        html += '<option value="' + item.storageLocationId + '">' + item.storageLocationName + '</option>';
                    });
                    $('select[name="storageLocationId"]').html(html);
                    form.render('select');
                }
            });
        }

        // 根据仓库ID加载库位
        function loadStorageLocationsByWarehouse(warehouseId) {
            if (!warehouseId) {
                loadStorageLocations();
                return;
            }
            $.get('/inventory/listStorageLocationsByWarehouse', {warehouseId: warehouseId}, function(res) {
                if(res.code === 0) {
                    var html = '<option value="">全部库位</option>';
                    $.each(res.data, function(i, item) {
                        html += '<option value="' + item.storageLocationId + '">' + item.storageLocationName + '</option>';
                    });
                    $('select[name="storageLocationId"]').html(html);
                    form.render('select');
                }
            });
        }

        // 仓库选择变化事件
        form.on('select(warehouseSelect)', function(data) {
            loadStorageLocationsByWarehouse(data.value);
        });

        // 页面加载时初始化下拉框
        $(function() {
            loadWarehouses();
            loadStorageLocations();
        });

        // 表格渲染
        table.render({
            elem: '#currentTableId',
            url: '/inventory/queryPage',
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list
                };
            },
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {field: 'materialCode', width: 150, title: '物料编号'},
                {field: 'materialName', width: 150, title: '物料名称'},
                {field: 'supplierName', width: 150, title: '供应商'},
                {field: 'warehouseName', width: 150, title: '仓库'},
                {field: 'storageLocationName', width: 150, title: '库位'},
                {field: 'inventoryQuantity', width: 120, title: '库存数', sort: true},
                {field: 'inventoryUnit', width: 80, title: '单位'},
                {field: 'inventoryTotalWeight', width: 120, title: '总重量(kg)', sort: true},
                {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [5, 10, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 搜索监听
        form.on('submit(data-search-btn)', function (data) {
            table.reload('currentTableId', {
                page: {curr: 1},
                where: data.field
            }, 'data');
            return false;
        });

        // 行内按钮监听 - 查看详情
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                $('#detail-materialCode').text(data.materialCode);
                $('#detail-materialName').text(data.materialName);
                $('#detail-supplierName').text(data.supplierName);
                $('#detail-warehouseName').text(data.warehouseName);
                $('#detail-storageLocationName').text(data.storageLocationName);
                $('#detail-inventoryQuantity').text(data.inventoryQuantity);
                $('#detail-inventoryUnit').text(data.inventoryUnit);
                $('#detail-inventoryTotalWeight').text(data.inventoryTotalWeight);
                $('#detail-inventoryBatchNumber').text(data.inventoryBatchNumber || '无');
                $('#detail-inventoryProductionDate').text(data.inventoryProductionDate || '无');
                $('#detail-inventoryExpiryDate').text(data.inventoryExpiryDate || '无');

                index = layer.open({
                    title: '库存详情',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['50%', '70%'],
                    content: $("#detail")
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });
    });
</script>
</body>
</html>